
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>jiugongge_demo</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		table{
			margin: 30px;
			border-collapse: collapse;
		}
		#test0{
			margin: 30px;
			width: 200px;
			height: 200px;
		}
		#test0 div{
			width: 50px;
			height: 50px;
			float: left;
			background: #eee;
			border: 5px solid #00f;
			text-align: center;
			line-height: 50px;
			color: #090;
			position: relative;
		}
		#test0 .lr_indent{
			margin-left: -5px;
			margin-right: -5px;
		}
		#test0 .tb_indent{
			margin-top: -5px;
			margin-bottom: -5px;
		}
		#test0 div:hover{
			border: 5px solid #f00;
			z-index: 999;
			background: #eee;
		}
		#test1 td{
			width: 50px;
			height: 50px;
			background: #eee;
			position: relative;
			border: 5px solid #00f;
			text-align: center;
		}
		#test1 td span{
			color: #090;
			display:block;
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: 0;
			line-height: 50px;
		}
		#test1 td span:hover{
			border: 5px solid #f00;
			margin-top:-5px;
			margin-left: -5px;
		}

		#test2 td{
			width: 50px;
			height: 50px;
			background: #eee;
			border: 5px solid #00f;
			text-align: center;
			vertical-align: top;
		}
		#test2 td div{
			position:relative;
			width: 50px;
			height: 50px;
		}
		#test2 td div span{
			color: #090;
			display:block;
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: 0;
			line-height: 50px;
		}
		#test2 td div span:hover{
			border: 5px solid #f00;
			margin-left: -5px;
			margin-top: -5px;
		}
	</style>
</head>
<body>
	<h2>1) div+负margin实现</h2>
	<div id="test0">
		<div>1</div>
		<div class="lr_indent">2</div>
		<div>3</div>
		<div class="tb_indent">4</div>
		<div class="lr_indent tb_indent">5</div>
		<div class="tb_indent">6</div>
		<div>7</div>
		<div class="lr_indent">8</div>
		<div>9</div>
	</div>
	<h2>2.1) table border-collapse: collapse实现</h2>
	<div id="test1">
		<table>
			<tr>
				<td><span>1</span></td>
				<td><span>2</span></td>
				<td><span>3</span></td>
			</tr>
			<tr>
				<td><span>4</span></td>
				<td><span>5</span></td>
				<td><span>6</span></td>
			</tr>
			<tr>
				<td><span>7</span></td>
				<td><span>8</span></td>
				<td><span>9</span></td>
			</tr>
		</table>
	</div>
	<h2>2.2) table思路改进</h2>
	<div id="test2">
		<table>
			<tr>
				<td><div><span>1</span></div></td>
				<td><div><span>2</span></div></td>
				<td><div><span>3</span></div></td>
			</tr>
			<tr>
				<td><div><span>4</span></div></td>
				<td><div><span>5</span></div></td>
				<td><div><span>6</span></div></td>
			</tr>
			<tr>
				<td><div><span>7</span></div></td>
				<td><div><span>8</span></div></td>
				<td><div><span>9</span></div></td>
			</tr>
		</table>
	</div>
</body>
</html>